<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后台登陆</title>
		<link rel="stylesheet" href="js/layui/css/layui.css" />
		<link rel="stylesheet" href="css/login.css" />
	</head>
	<body class="layui-layout-body" onkeydown="onEnter();">
		<div class="layui-fluid" style="padding: 0px;">
			<canvas id="particle"></canvas>
			<div class="layui-form layui-form-pane layui-admin-login">
				<div class="layui-admin-login-header">
					<h1>后台登陆</h1>
					<p>权限管理系统</p>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
					<div class="layui-input-block">
						<input name="username" id="uname"  class="layui-input" type="text" placeholder="请输入账号" autocomplete="off" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
					<div class="layui-input-block">
						<input name="userpassword" id="pwd"  class="layui-input" type="password" placeholder="请输入密码" autocomplete="off"/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
					<div class="layui-input-block">
						<input name="userpassword" id="token"  class="layui-input" type="text" placeholder="Token" autocomplete="off"/>
					</div>
				</div>
				<div class="layui-form-item">
					<input type="checkbox" pane name="remember" title="记住密码" lay-skin="primary"> 
					<a href="javascript:;" style="margin-top: 10px;float: right;color: #009688;">忘记密码?</a>
				</div>
				<div class="layui-form-item">
					<div class="layui-btn-container">
						<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login" onclick="login()">
							<i class="layui-icon layui-icon-ok-circle"></i>登陆
						</button>
					</div>
				</div>
				<!--底部-->
				<div class="layui-footer">心的远行</div>
			</div>
		</div>
		<script src="./js/layui/layui.js"></script>
		<script type="text/javascript" src="js/particle.min.js" ></script>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			function login(){
				layui.use('layer', function(){
				var layer = layui.layer;
				var token = $("#token").val()
				var globalUrl = "http://stuapi.ysdjypt.com";
				var uname = $("#uname").val();
				var pwd = $("#pwd").val();
				$.ajax({
					url:"/api/login",
					data:{
						un:uname,
						pwd:pwd,
						token:token
					},
					dataType:"json",
					type:"post",
					success:function(res){
						//console.log(JSON.parse(res.message).roleNames);
						if(res.success){
							layer.msg(res.remark,{icon: 6});
							//登录成功后存储角色的信息
							window.localStorage.setItem("roleNames",res.message.roleNames);
							window.localStorage.setItem("globalUrl",globalUrl);
							window.localStorage.setItem("token",token);
							//跳转
							window.location.href="main.html";
						}else{
							layer.msg(res.remark,{icon: 5});
						}
						
					}
				})
				})
			}
		</script>
		<script>
			//登陆按钮绑定回车
			function onEnter(){
				if(window.event.keyCode == 13){
					document.getElementsByTagName("button")[0].click();
				}
			}
			var particle = new Particle('#particle', {
				effect: 'line'
			});
		</script>
	</body>
</html>
